<template>
  <div>
    <el-card class="sur-card">
      <div class="sur-card-title" slot="header">
        <span>商品列表</span>
        <el-button type="text" @click="$router.push('/shop/item_edit')"
          >添加商品</el-button
        >
      </div>
      <el-row>
        <div class="search-section">
          <el-form :inline="true">
            <el-form-item>
              <el-input size="small" placeholder="请输入当前字段"> </el-input>
            </el-form-item>
            <el-form-item>
              <el-input size="small" placeholder="请输入当前字段">
              </el-input> </el-form-item
            ><el-form-item>
              <el-input size="small" placeholder="请输入当前字段"> </el-input>
            </el-form-item>
            <el-form-item>
              <el-button-group>
                <el-button size="small" icon="el-icon-search" @click="onSearch"
                  >查询</el-button
                >
                <el-button
                  size="small"
                  icon="el-icon-refresh"
                  @click="onClearSearchForm"
                  >刷新</el-button
                >
              </el-button-group>
            </el-form-item>
          </el-form>
        </div>
      </el-row>
      <el-table :data="itemList" border v-loading="loadingTable">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" class="expand-form">
              <el-form-item label="商品编码">
                <span>{{ props.row.itemCode }}</span>
              </el-form-item>
              <el-form-item label="副标题">
                <span>{{ props.row.caption }}</span>
              </el-form-item>
              <el-form-item label="关键词">
                <span>{{ props.row.keywords }}</span>
              </el-form-item>
              <el-form-item label="轮播媒体">
                <span
                  v-for="(media, index) in JSON.parse(
                    props.row.carouselMediasJson
                  )"
                  :key="index"
                >
                  <el-image
                    v-if="media.type === 'image'"
                    style="width: 80px;height: 80px;"
                    fit="contain"
                    :src="media.link"
                    :preview-src-list="Array.of(media.link)"
                  ></el-image>
                  <video
                    v-if="media.type === 'video'"
                    :src="media.link"
                    style="width: 80px;height: 80px;"
                  ></video>
                </span>
              </el-form-item>
              <el-form-item label="商品标签">
                <span>{{ props.row.tags }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
          label="序号"
          type="index"
          width="55"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="id"
          label="商品ID"
          align="center"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="itemName"
          label="商品名"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="catId"
          label="商品分类"
          width="100"
          :formatter="catFormatter"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="onSale"
          label="上架状态"
          align="center"
          width="80"
        >
          <template slot-scope="scope">
            <i
              v-if="scope.row.onSale"
              class="el-icon-circle-check"
              style="color: #1cb5e0;font-size: 28px;"
            ></i>
            <i
              v-else
              class="el-icon-circle-close"
              style="color: orangered;font-size: 28px;"
            ></i>
          </template>
        </el-table-column>

        <el-table-column prop="mainImage" label="主图" align="center">
          <template slot-scope="scope">
            <el-image
              fit="contain"
              :src="scope.row.mainImage"
              style="height: 100px;width: 100px;"
              :preview-src-list="Array.of(scope.row.mainImage)"
            ></el-image>
          </template>
        </el-table-column>
        <!-- <el-table-column
          prop="itemType"
          label="商品类型"
          align="center"
        ></el-table-column>-->
        <el-table-column
          prop="visitedNum"
          label="浏览量"
          align="center"
          width="80"
        ></el-table-column>
        <el-table-column
          prop="sort"
          label="排序"
          align="center"
          width="80"
        ></el-table-column>
        <el-table-column prop="createTime" label="创建时间" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.createTime | dateFormatMin }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="200">
          <template slot-scope="scope">
            <el-dropdown
              split-button
              type="primary"
              @click="onEditRow(scope.row)"
              @command="command => handleCommand(command, scope.row)"
            >
              基础信息
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="skuEdit">规格编辑</el-dropdown-item>
                <el-dropdown-item command="descEdit">图文详情</el-dropdown-item>
                <el-dropdown-item command="delete">删除商品</el-dropdown-item>
                <el-dropdown-item command="saleSwitch"
                  >上/下架</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <el-row>
        <el-pagination
          class="page-section"
          background
          @current-change="onPaging"
          :page-size="pageVo.size"
          @size-change="handleSizeChange"
          :page-sizes="[20, 50, 100, 200]"
          layout="total,sizes,prev, pager, next"
          :total="pageVo.total"
        />
      </el-row>
    </el-card>
    <!--    编辑row对话框-->
  </div>
</template>

<script>
import {
  addItem,
  getItemByPage,
  removeItemById,
  turnOffSale,
  turnOnSale,
  updateItemById
} from "@/api/admin-api/ItemApi";
import { listAllCategory } from "@/api/admin-api/CagegoryApi";

export default {
  name: "Item",
  data() {
    return {
      pageVo: {
        current: 1,
        size: 20,
        total: 0, //总数量
        pages: 0, //总页数
        orders: [{ column: 'create_time' }] //排序字段
      },
      editRowVisible: false,
      itemModel: {
        catId: null,
        onSale: null,
        itemName: null,
        itemCode: null,
        caption: null,
        keywords: null,
        mainImage: null,
        carouselMediasJson: null,
        itemType: null,
        tags: null,
        visitedNum: null,
        sort: null
      },
      loadingTable: false,
      itemList: [],
      categories: []
    };
  },
  methods: {
    handleClick(value) {
      console.log(value);
    },
    loadAllCategories() {
      return new Promise(resolve => {
        listAllCategory().then(data => {
          // this.categories = data.records;
          resolve(data.records);
        });
      });
    },
    catFormatter(row) {
      let cat = this.categories.find(cat => cat.id === row.catId);
      return cat && cat.catName;
    },
    onSearch() {
      this.loadItemList();
    },
    onClearSearchForm() {
      this.pageVo = this.$options.data().pageVo;
      this.loadItemList();
    },
    onPaging(currentPage) {
      // 页码改变
      this.pageVo.current = currentPage;
      this.loadItemList();
    },
    handleSizeChange(val) {
      //页大小改变
      this.pageVo.size = val;
      this.loadItemList();
    },
    onSaveRow() {
      //保存或更新
      if (this.itemModel.id) {
        //更新
        this.$loading();
        updateItemById(this.itemModel)
          .then(() => {
            this.$message.success("操作成功");
            this.loadItemList();
            this.$loading().close();
            this.editRowVisible = false;
          })
          .catch(() => {
            this.$loading().close();
          });
      } else {
        //保存
        this.$loading();
        addItem(this.itemModel)
          .then(() => {
            this.$message.success("操作成功");
            this.$loading().close();
            this.loadItemList();
            this.editRowVisible = false;
          })
          .catch(() => {
            this.$loading().close();
          });
      }
    },
    showAddRowDialog() {
      //显示添加行对话框
      this.editRowVisible = true;
      this.itemModel = this.$options.data().itemModel;
    },
    loadItemList() {
      this.loadingTable = true;
      getItemByPage(this.pageVo)
        .then(data => {
          this.itemList = data.records;
          this.pageVo.current = data.current;
          this.pageVo.pages = data.pages;
          this.pageVo.total = Number(data.total);
          this.loadingTable = false;
        })
        .catch(() => {
          this.loadingTable = false;
        });
    },
    handleCommand(command, row) {
      console.log("command", command, row);
      switch (command) {
        case "delete":
          this.onDeleteRow(row);
          break;
        case "skuEdit":
          this.editSku(row);
          break;
        case "saleSwitch":
          this.saleSwitch(row);
          break;
        case "descEdit":
          this.editItemDesc(row);
          break;
        default:
          break;
      }
    },
    editItemDesc(row) {
      this.$router.push(
        "/shop/desc_edit?id=" + row.id + "&name=" + row.itemName
      );
    },
    saleSwitch(row) {
      if (row.onSale === true) {
        // 下架
        turnOffSale(row.id).then(() => {
          this.$message.success("下架成功");
          this.loadItemList();
        });
      }
      if (row.onSale === false) {
        // 上架
        turnOnSale(row.id).then(() => {
          this.$message.success("上架成功");
          this.loadItemList();
        });
      }
      console.log(row);
    },
    editSku(row) {
      console.log(row);
      this.$router.push(
        "/shop/sku_edit?id=" + row.id + "&name=" + row.itemName
      );
    },
    onEditRow(row) {
      //编辑行
      // this.itemModel = row;
      // this.editRowVisible = true;
      this.$router.push("/shop/item_edit?id=" + row.id);
    },
    onDeleteRow(row) {
      //删除行
      this.$confirm("确定要删除当前行吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      }).then(() => {
        this.$loading();
        removeItemById(row.id)
          .then(() => {
            this.loadItemList();
            this.$loading().close();
          })
          .catch(() => {
            this.$loading().close();
          });
      });
    }
  },
  async mounted() {
    this.categories = await this.loadAllCategories();
    console.log("this.categories", this.categories);
    this.loadItemList();
  }
};
</script>
<style scoped>
.expand-form {
}
.expand-form >>> label {
  color: #99a9bf;
}
</style>
